<template>
	<view class="activity">
		<view class="status" :style="[{height:statusBar+ 'px'}]"></view>
		<view class="navigation" :style="[{top:(statusBar-2) + 'px',background:isHeaderChange?'#FEDBC5':''}]">
			<view class="back-box">
				<image src="/static/images/back.png" class="back" @click="back()" mode=""></image>
			</view>
			<!-- <view class="navigation-title"  v-if="isHeaderChange" >黄金风爆</view> -->
			<view class="ranking-box" @click="goCallFriendPage()">
				<image src="/static/images/rangking-icon.png" class="rangking-icon" mode=""></image>
			</view>
			<view class="introduction-box" @click="openVideoPopup()">
				<image src="/static/images/introduction-icon-page.png" class="introduction-icon" mode=""></image>
			</view>
		</view>
		<view class="navigation-position" :style="[{height:statusBar+ 'px'}]"></view>
		<view class="activity-header">
			<image src="/static/images/activity-header-bg-fsm.png" class="activity-header-bg" mode=""></image>
			<view class="header-section-one">
				<view class="header-section-ong-bg"></view>
				<view class="activity-join-user" v-if="user">
					<view class="activity-join-user-left"
						v-if="user.grade=='vip'&&(user.is_gold_master!=1 || user.is_gold_master==false)&&(user.is_gold_intern!=1 || user.is_gold_intern == false)">
						<image src="/static/images/user-grade-vip.png" class="user-grade-icon" mode=""></image>
						<view class=""></view>
						<view class="tip-icon-box" @click="openTips()">
							<image src="/static/images/tip-icon-black.png" mode=""></image>
						</view>
					</view>

					<view class="activity-join-user-left"
						v-if="user&&user.grade=='vip'&&(user.is_gold_intern==1 || user.is_gold_intern==true)&&(user.is_gold_master!=1 || user.is_gold_master==false || user.is_gold_master=='')">
						<image src="/static/images/activity-join-user-grade-icon.png" mode=""></image>
						<view class="">见习炼金师</view>
						<view class="grade-progress">
							({{ user.my_new_gold_children }}/{{ user.upgrade_needs_gold_children }})</view>
						<view class="tip-icon-box" @click="openTips()">
							<image src="/static/images/tip-icon-black.png" mode=""></image>
						</view>
					</view>
					<view class="activity-join-user-left"
						v-if="user&&user.grade=='vip'&&(user.is_gold_master==1 || user.is_gold_master==true)">
						<image src="/static/images/golder-grade-icon-vip3.png" mode=""></image>
						<view class="">炼金师</view>
						<view class="tip-icon-box" @click="openTips()">
							<image src="/static/images/tip-icon-black.png" mode=""></image>
						</view>
					</view>
					<view class="activity-join-user-right" @click="goActivityRecord()">
						<view class="">活动记录</view>
						<image src="/static/images/activity-right-more.png" mode=""></image>
						<view class="hasOrderTips" v-if="countDta&&(countDta.unpaid + countDta.pending>0)">
							{{ countDta.unpaid + countDta.pending }}</view>
					</view>
				</view>
				<view class="activity-account" v-if="user">
					<view class="activity-account-box">
						<view class="activity-account-item" @click="goActivityAccount()">
							<view>
								<image src="/static/images/activity-account-icon.png" mode=""></image>
								<view>余额</view>
							</view>
							<view>
								<view>{{ user.gold_coins }}</view>
								<image src="/static/images/activity-right-more.png" mode=""></image>
							</view>
						</view>
						<view class="activity-account-item" @click="goActivityGoldCoins()">
							<view>
								<image src="/static/images/activity-account-gold-bean-icon.png" mode=""></image>
								<view>金豆</view>
							</view>
							<view>
								<view class="">{{ user.gold_beans>0?user.gold_beans:'0' }}</view>
								<image src="/static/images/activity-right-more.png" mode=""></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="activity-enter" v-if="activityRounds.length>0">
				<view class="activity-enter-header-nav" v-if="activityRounds.length>0">
					<view class="activity-enter-header-nav-item" v-for="(item,index) in activityRounds" :key="index"
						:class="[(tabIndex==1&&index!=1) || (tabIndex==0&&index==2) || (tabIndex==2&&index==0)?'haswidth':'']">
						<image src="/static/images/activity-enter-nav-left.png" v-if="tabIndex==0&&index==0"
							mode="heightFix"></image>
						<image src="/static/images/activity-enter-nav-center.png" v-if="tabIndex==1&&index==1"
							mode="heightFix"></image>
						<image src="/static/images/activity-enter-nav-right.png" v-if="tabIndex==2&&index==2"
							mode="heightFix"></image>
						<!-- <view class="activity-enter-header-nav-item-title" v-if="item.is_ending==1">
							<view class="activity-enter-time" :class="[tabIndex==index?'tabActive-time':'']">
								清场中</view>
							<view class="activity-enter-rounds-num"
								:class="[tabIndex==index?'tabActive-rounds-num':'']">{{ item.title }}进场时间</view>
						</view> -->
						<view class="activity-enter-header-nav-item-title"  v-if="item.is_ending==''">
							<view class="activity-enter-time" :class="[tabIndex==index?'tabActive-time':'']">
								{{ item.today_opened_at.substring(11,16) }}</view>
							<view class="activity-enter-rounds-num"
								:class="[tabIndex==index?'tabActive-rounds-num':'']">{{ item.title }}进场时间</view>
						</view>
					</view>
					<view class="activity-enter-header-nav-item haswidth" v-if="activityRounds.length==2">
						<view class="activity-enter-header-nav-item-title">
							<view class="activity-enter-time activity-enter-time1">高级场</view>
							<view class="activity-enter-rounds-num">未开放敬请期待</view>
						</view>
					</view>
				</view>
				<view class="activity-enter-count-down-time-box" v-if="activityRounds.length>0">
					<block v-for="(item,index) in activityRounds" :key="index">
						<view v-if="item.is_today_off!=1&&item.is_today_off!=true">
							<view class="activity-enter-count-down-time-part activity-enter-count-down-time-part-unable"
								v-if="item.is_able&&index==tabIndex&&!item.isStart" @click="goActivityList(item,index)">
								<view class="">
									<view class="activity-enter-time-to-end" v-if="!item.isStart">距离本场开始</view>
									<view class="activity-enter-time-to-end" v-if="item.isStart">距离本场结束</view>
									<view class="activity-enter-count-down-time1">
										<block v-if="item.isStart">
											<uni-countdown :show-day="false" class="time1" v-if="item.isStart" start
												:hour="item.endTimeCoutDown.h" :minute="item.endTimeCoutDown.m"
												:second="item.endTimeCoutDown.s" ref="timeDown" @timeup="timeup(index)"
												color="#FE3F34" splitorColor="#FE3F34"></uni-countdown>
										</block>
										<block v-if="!item.isStart">
											<uni-countdown :show-day="false" class="time2" v-if="!item.isStart"
												:hour="item.stratTimeCoutDown.h" :minute="item.stratTimeCoutDown.m"
												:second="item.stratTimeCoutDown.s" ref="timeDown"
												@timeup="timeup(index)" color="#FE3F34" splitorColor="#FE3F34">
											</uni-countdown>
										</block>
									</view>
								</view>
								<view class="join-activity-btn join-activity-btn-ready">立即进场</view>
							</view>

							<view class="" v-show="index==tabIndex">
								<view
									class="activity-enter-count-down-time-part activity-enter-count-down-time-part-unable"
									v-if="item.is_able&&item.isStart" @click="goActivityList(item,index)">
									<view class="">
										<view class="activity-enter-time-to-end" v-if="!item.isStart">距离本场开始</view>
										<view class="activity-enter-time-to-end" v-if="item.isStart">距离本场结束</view>
										<view class="activity-enter-count-down-time1">
											<block v-if="item.isStart">
												<uni-countdown :show-day="false" class="time1" v-if="item.isStart" start
													:hour="item.endTimeCoutDown.h" :minute="item.endTimeCoutDown.m"
													:second="item.endTimeCoutDown.s" ref="timeDown"
													@timeup="timeup(index)" color="#FE3F34" splitorColor="#FE3F34">
												</uni-countdown>
											</block>
											<block v-if="!item.isStart">
												<uni-countdown :show-day="false" class="time2" v-if="!item.isStart"
													:hour="item.stratTimeCoutDown.h" :minute="item.stratTimeCoutDown.m"
													:second="item.stratTimeCoutDown.s" ref="timeDown"
													@timeup="timeup(index)" color="#FE3F34" splitorColor="#FE3F34">
												</uni-countdown>
											</block>
										</view>
									</view>
									<view class="join-activity-btn join-activity-btn-ready">立即进场</view>
								</view>
								<view class="activity-enter-count-down-time-part" v-if="!item.is_able">
									<view class="activity-enter-before-icon">
										<image src="/static/images/activity-enter-ready-go.png" mode=""></image>
									</view>
									<view class="activity-enter-count-down-time">
										<uni-countdown :show-day="false" v-if="item.isEnd"
											:hour="item.nextStartCoutDown.h" :minute="item.nextStartCoutDown.m"
											:second="item.nextStartCoutDown.s" ref="popup" background-color="#FEEBE3"
											@timeup="timeup(index)" color="#FE3F34" splitorColor="#FE3F34">
										</uni-countdown>
										<uni-countdown :show-day="false" v-if="!item.isEnd"
											:hour="item.openTimeCoutDown.h" :minute="item.openTimeCoutDown.m"
											:second="item.openTimeCoutDown.s" ref="popup" background-color="#FEEBE3"
											@timeup="timeup(index)" color="#FE3F34" splitorColor="#FE3F34">
										</uni-countdown>
									</view>
									<view class="unstart">暂未开始</view>
								</view>
							</view>
						</view>
						<view v-if="(item.is_today_off==1||item.is_today_off==true)&&index==tabIndex">
							<view class="close-down-box">
								<image src="/static/images/close-down1.png" class="close-down" mode=""></image>
								<view>今日抢购活动暂不开放哦</view>
							</view>
						</view>
					</block>
				</view>
			</view>
		</view>
		<view class="activity-content">
			<view class="activity-goods-list-header-title">
				<image src="/static/images/activity-goods-list-header-img-center.png" mode=""></image>
			</view>
			<view class="activity-goods-list">
				<view class="activity-goods-item" v-for="(item,index) in pageItems" :key="index"
					@click="goToProduct(item.id)">
					<view class="activity-goods-icon">
						<image :src="item.cover_url" mode=""></image>
					</view>
					<view class="activity-goods-info">
						<view class="activity-goods-title">{{ item.title }}</view>
						<view class="gold-coins">
							<image src="/static/images/gold-coins-text-icon.png" class="gold-coins-text-icon" mode="">
							</image>
							<view class="gold-coins-num">
								<text class="gold-coins-need">立得<text>{{ parseInt(item.price_lowest) }}</text> 金豆</text>
							</view>
						</view>
						<view class="activity-goods-price">
							<image src="/static/images/activity-vip-price-icon.png" mode=""></image>
							<text>￥</text>
							<text>{{ item.price_lowest }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<uni-popup ref="tipsPopup" type="center" :mask-click="false">
			<view class="tips-content-modal">
				<view class="tips-content-title">会员等级说明</view>
				<view class="tips-content">
					<view class="tips-item">① VIP：注册即享会员价购物权益；</view>
					<view class="tips-item">② 见习炼金师：参加黄金风爆抢购活动即升级见习炼金师，享直属伙伴抢购权益价1%推荐奖励；</view>
					<view class="tips-item">③ 炼金师：直邀5位见习炼金师即升级炼金师，享直属伙伴抢购权益价2%推荐奖励+1%炼金师奖励+平台特别活动奖励。</view>
				</view>
				<view class="confirm" @click="closePop()">我知道了</view>
			</view>
		</uni-popup>

		<uni-popup ref="videoPopup" type="center" mask-background-color="rgba(0,0,0,1)">
			<view class="video-content-modal">
				<video id="myVideo"
					src="https://littleshop.oss-cn-beijing.aliyuncs.com/others/05f4afec4594fc96804626056b3f3a87.mp4"
					@error="videoErrorCallback" autoplay="true" object-fit="fill" controls></video>
			</view>
		</uni-popup>

		<image class="return-top" mode="aspectFit" v-if="isTopButtonShow" @click="returnTop"
			src="/static/images/return-top.png"></image>
	</view>
</template>

<script>
	/* function getRequestParams() {
		let url = location.href;
		let requestParams = {};
		if (url.indexOf('?') !== -1) {
			let str = url.substr(url.indexOf('?') + 1);
			let strs = str.split('&');
			for (let i = 0; i < strs.length; i++) {
				requestParams[strs[i].split('=')[0]] = decodeURI(strs[i].split('=')[1]);
			}
		}
		return requestParams;
	}
	let params = getRequestParams();
	let token = params['token'];
	let status_bar = params['status_bar'];
	let source = 'wap'
	if (token != undefined) {
		uni.setStorage({
			key: 'token',
			data: token
		})
		source = 'app'
	}
	if (status_bar != undefined) {
		uni.setStorage({
			key: 'status_bar',
			data: status_bar
		})
	}
	uni.getStorage({
		key: 'token',
		success: function(res) {
			if (res.data != '') {
				source = 'app'
			} else {
				source = 'wap'
			}
		},
		fail: function() {
			source = 'wap'
		}
	})
	uni.getStorage({
		key: 'status_bar',
		success: function(res) {
			if (res.data != '') {
				status_bar = res.data;
			}
		}
	}) */
	import store from "store"
	import {
		mapGetters,
		mapMutations,
		mapActions
	} from 'vuex'
	import {
		goldRounds,
		goldProducts,
		goldRecordsCount
	} from "api/goldstormApi.js"
	import {
		getProductsList
	} from "api/productApi.js"
	import Pagination from "mixins/Pagination"
	import {
		getUser
	} from "api/userApi"

	export default {
		store,
		computed: {
			...mapGetters([
				'user',
				'statusBar',
				'isLogin'
			])
		},
		mixins: [
			Pagination
		],
		data: () => ({
			source: source,
			activityRounds: [],
			goldProductsList: [],
			isActivity: true,
			frompath: 'router',
			isHeaderChange: false,
			date: '',
			tempList: [],
			isUp: false,
			tabIndex: 0,
			scrollTop: 0,
			needScroll: true,
			countDta: null,
			isTopButtonShow: false
		}),
		methods: {
			...mapMutations(['setUser', 'setStatusBar']),
			back() {
				if (this.source == 'wap') {
					uni.reLaunch({
						url: '/pages/index/index'
					})
				} else {
					backToApp.postMessage('back')
				}
				uni.setStorage({
					key: "activityScrollTop",
					data: 0
				})
			},
			returnTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 100
				})
			},
			showModal() {
				uni.showModal({
					title: '提示',
					content: '系统升级维护中!',
					showCancel: false
				})
			},
			goActivityList(item, index) {
				uni.navigateTo({
					url: '/packs/pages/activity/activityList?round=' + item.id + '&sessionsNumber=' + index
				})
			},
			goActivityAccount() {
				uni.navigateTo({
					url: '/packs/pages/activity/activityAccount'
				})
			},
			goActivityGoldCoins() {
				uni.navigateTo({
					url: '/packs/pages/activity/activityGoldCoins'
				})
			},
			goActivityRecord() {
				uni.navigateTo({
					url: '/packs/pages/activity/activityRecord'
				})
			},
			goTimeTest() {
				uni.navigateTo({
					url: '/packs/pages/activity/timeTest'
				})
			},
			goCallFriendPage() {
				uni.navigateTo({
					url: '/packs/pages/callFriend/callFriend'
				})
			},
			goldRecordsCount() {
				goldRecordsCount().then(res => {
					if (!res.message) {
						this.countDta = res
					}
				})
			},
			goldRounds() {
				goldRounds().then(res => {
					if (!res.message) {
						this.activityRounds = res;
						this.tempList = res;

						this.initTime()
						this.showJudge()
					}
				})
			},
			showJudge() {
				let list = this.activityRounds;
				let _this = this
				for (var i = 0; i < list.length; i++) {
					let date = new Date(list[i].now.replace(/-/g, '/')).getTime()
					let today_opened_at = new Date(list[i].today_opened_at.replace(/-/g, '/')).getTime()
					let today_started_at = new Date(list[i].today_started_at.replace(/-/g, '/')).getTime()
					let today_ended_at = new Date(list[i].today_ended_at.replace(/-/g, '/')).getTime()
					if (date - today_ended_at < 0) {
						this.tabIndex = i
						return
					}
				}
			},
			async getUser() {
				let response = await getUser()
				this.setUser(response)
			},
			goToProduct(id) {
				this.needScroll = true
				uni.navigateTo({
					url: `/packs/pages/product/show?product_id=${id}`
				})
			},
			async loadPageItems() {
				return await getProductsList({
					is_gold_bean: 1
				})
			},
			timeup(index) {
				this.isUp = true
				let item = this.activityRounds[index]
				if (!item.isOpen) {
					this.activityRounds[index].isOpen = true
					this.activityRounds[index].is_able = true
				} else {
					if (!item.isStart) {
						this.activityRounds[index].isStart = true
						if (item.isEnd) {
							this.activityRounds[index].isEnd = true
							this.activityRounds[index].is_able = false
							this.activityRounds[index].isStart = false
							this.activityRounds[index].isOpen = false
						}
					} else {
						if (item.isEnd) {
							this.activityRounds[index].isEnd = true
							this.activityRounds[index].is_able = false
							this.activityRounds[index].isStart = false
							this.activityRounds[index].isOpen = false
						} else {
							this.activityRounds[index].isEnd = true
							this.activityRounds[index].is_able = false
						}
					}
				}
				if (this.activityRounds[index].isEnd) {
					if (index != 2) {
						this.tabIndex = index + 1
					} else {
						this.tabIndex = 0
					}
				}
				this.$forceUpdate()
			},
			initTime() {
				let list = this.activityRounds;
				let tempList = list.map((item, index) => {
					let date = new Date(item.now.replace(/-/g, '/')).getTime()
					let is_able = false;
					let isStart = false;
					let isEnd = false;
					if (date - new Date(item.today_opened_at.replace(/-/g, '/')).getTime() >= 0 && new Date(item.today_ended_at.replace(/-/g, '/')).getTime() - date >= 0) {
						is_able = true
					} else {
						is_able = false
					}
					if (date - new Date(item.today_started_at.replace(/-/g, '/')).getTime() >= 0) {
						isStart = true
					} else {
						isStart = false
					}
					if (date - new Date(item.today_ended_at.replace(/-/g, '/')).getTime() >= 0) {
						isEnd = true
						item.is_able = false
						item.isStart = false
					} else {
						isEnd = false
					}
					let isOpen = false;
					if (date - new Date(item.today_opened_at.replace(/-/g, '/')).getTime() >= 0) {
						isOpen = true
					} else {
						isOpen = false
					}
					let openTimeDif = new Date(item.today_opened_at.replace(/-/g, '/')).getTime() - date;
					let openTimeCoutDown = {};
					if (openTimeDif >= 0) {
						let d = Math.floor(openTimeDif / 1000 / 60 / 60 / 24);
						let h = Math.floor(openTimeDif / 1000 / 60 / 60 % 24);
						let m = Math.floor(openTimeDif / 1000 / 60 % 60);
						let s = Math.floor(openTimeDif / 1000 % 60);
						if (d > 0) {
							openTimeCoutDown = {
								d: 0,
								h: 23,
								m: 59,
								s: 59
							}
						} else {
							openTimeCoutDown = {
								d: d,
								h: h,
								m: m,
								s: s
							}
						}
					} else {
						openTimeDif = 0;
						openTimeCoutDown = {
							d: 0,
							h: 0,
							m: 0,
							s: 0
						}
					}
					let stratTimeDif = (new Date(item.today_started_at.replace(/-/g, '/')).getTime() - date) -
						openTimeDif;
					let stratTimeCoutDown = {};
					if (stratTimeDif >= 0) {
						let d = Math.floor(stratTimeDif / 1000 / 60 / 60 / 24);
						let h = Math.floor(stratTimeDif / 1000 / 60 / 60 % 24);
						let m = Math.floor(stratTimeDif / 1000 / 60 % 60);
						let s = Math.floor(stratTimeDif / 1000 % 60);
						if (d > 0) {
							stratTimeCoutDown = {
								d: 0,
								h: 24,
								m: 0,
								s: 0
							}
						} else {
							stratTimeCoutDown = {
								d: d,
								h: h,
								m: m,
								s: s
							}
						}
					} else {
						stratTimeDif = 0;
						stratTimeCoutDown = {
							d: 0,
							h: 0,
							m: 0,
							s: 0
						}
					}
					let endTimeDif = new Date(item.today_ended_at.replace(/-/g, '/')).getTime() - date;
					if (new Date(item.today_started_at.replace(/-/g, '/')).getTime() - date > 0) {
						endTimeDif = new Date(item.today_ended_at.replace(/-/g, '/')).getTime() - new Date(item
							.today_started_at.replace(/-/g, '/')).getTime()
					}
					let endTimeCoutDown = {};
					if (endTimeDif >= 0) {
						let d = Math.floor(endTimeDif / 1000 / 60 / 60 / 24);
						let h = Math.floor(endTimeDif / 1000 / 60 / 60 % 24);
						let m = Math.floor(endTimeDif / 1000 / 60 % 60);
						let s = Math.floor(endTimeDif / 1000 % 60);
						if (d > 0) {
							endTimeCoutDown = {
								d: 0,
								h: 23,
								m: 59,
								s: 59
							}
						} else {
							endTimeCoutDown = {
								d: d,
								h: h,
								m: m,
								s: s
							}
						}
					} else {
						endTimeDif = 0;
						endTimeCoutDown = {
							d: 0,
							h: 0,
							m: 0,
							s: 0
						}
					}
					let nextStartTimeDif = new Date(item.tomorrow_opened_at.replace(/-/g, '/')).getTime() - date;
					if (date - new Date(item.today_ended_at.replace(/-/g, '/')).getTime() < 0) {
						nextStartTimeDif = new Date(item.tomorrow_opened_at.replace(/-/g, '/')).getTime() -
							new Date(item.today_ended_at.replace(/-/g, '/')).getTime();
					}
					let nextStartCoutDown = {};
					if (nextStartTimeDif >= 0) {
						let d = Math.floor(nextStartTimeDif / 1000 / 60 / 60 / 24);
						let h = Math.floor(nextStartTimeDif / 1000 / 60 / 60 % 24);
						let m = Math.floor(nextStartTimeDif / 1000 / 60 % 60);
						let s = Math.floor(nextStartTimeDif / 1000 % 60);
						if (d > 0) {
							nextStartCoutDown = {
								d: 0,
								h: 23,
								m: 59,
								s: 59
							}
						} else {
							nextStartCoutDown = {
								d: d,
								h: h,
								m: m,
								s: s
							}
						}
					} else {
						nextStartCoutDown = {
							d: 0,
							h: 0,
							m: 0,
							s: 0
						}
					}
					return item = {
						endTimeCoutDown: endTimeCoutDown,
						id: item.id,
						isEnd: isEnd,
						isOpen: isOpen,
						isStart: isStart,
						is_able: is_able,
						nextStartCoutDown: nextStartCoutDown,
						now: item.now,
						openTimeCoutDown: openTimeCoutDown,
						stratTimeCoutDown: stratTimeCoutDown,
						title: item.title,
						today_ended_at: item.today_ended_at,
						today_opened_at: item.today_opened_at,
						today_started_at: item.today_started_at,
						tomorrow_ended_at: item.tomorrow_ended_at,
						tomorrow_opened_at: item.tomorrow_opened_at,
						tomorrow_started_at: item.tomorrow_started_at,
						is_today_off: item.is_today_off,
						is_ending : item.is_ending,
					}
				})
				this.activityRounds = tempList;
			},
			backEvent() {
				this.needScroll = false
				uni.getStorage({
					key: 'activityScrollTop',
					success: (res) => {
						setTimeout(function() {
							uni.pageScrollTo({
								scrollTop: res.data,
								duration: 0
							})
						}, 20)
					}
				})
			},
			openTips() {
				this.$refs.tipsPopup.open('center')
			},
			closePop() {
				this.$refs.tipsPopup.close()
			},
			openVideoPopup() {
				uni.navigateTo({
					url: '/packs/pages/activity/activityIntroduction'
				})
			},
			closeVideoPop() {
				this.$refs.videoPopup.close()
			}
		},
		onUnload() {
			uni.setStorage({
				key: "activityScrollTop",
				data: 0
			})
		},
		async onShow() {
			if (await this.source == 'wap') {

				// if (!await this.isLogin) {

				// 	uni.navigateTo({
				// 		url: '/packs/pages/auth/auth'
				// 	})  

				// }
			} else {
				uni.hideTabBar()
			}
			if (status_bar != undefined) {
				this.setStatusBar(status_bar)
			}
			this.activityRounds = [];
			if (await this.isLogin || status_bar != undefined) {
				this.goldRounds()
				await this.getUser()
				await this.loadPageData()
				this.goldRecordsCount()
			}
			if (this.needScroll) {
				uni.getStorage({
					key: 'activityScrollTop',
					success: (res) => {
						if (res.data > 0) {
							uni.pageScrollTo({
								scrollTop: 5,
								duration: 0
							})
						}
					}
				})
			}
		},
		onPageScroll(e) {
			if (e.scrollTop >= 42) {
				this.isHeaderChange = true
				this.isTopButtonShow = true
			} else {
				this.isHeaderChange = false
				this.isTopButtonShow = false
			}
			this.scrollTop = e.scrollTop
			uni.setStorage({
				key: "activityScrollTop",
				data: this.scrollTop
			})
		},
		async onLoad(options) {
			if (await this.source == 'wap' && options.from == 'invest') {
				if (window.history && window.history.pushState) {
					history.pushState(null, null, document.URL);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #F6F6F6;
	}

	.status {
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 99;
		background: #FEDBC5;
	}

	.navigation {
		width: 100%;
		height: 100rpx;
		background: rgba(0, 0, 0, 0);
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 99;
	}

	.navigation-position {
		width: 100%;
		height: 100rpx;
		background: #FEDBC5;
	}

	.back-box {
		width: 50rpx;
		height: 50rpx;
		position: absolute;
		top: 26rpx;
		left: 32rpx;
		// background: rgba(255,255,255,0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
	}

	.back {
		display: block;
		width: 48rpx;
		height: 48rpx;

	}

	.navigation-title {
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
		opacity: 0.8;
	}

	.ranking-box {
		display: flex;
		align-items: center;
		position: absolute;
		right: 28rpx;

		>view {
			font-size: 26rpx;
			color: #666666;
			margin-left: 10rpx;
		}

		>image {
			display: block;
			width: 32rpx;
			height: 32rpx;
		}

		.rangking-icon {
			display: block;
			width: 140rpx;
			height: 52rpx;
		}
	}

	.introduction-box {
		display: flex;
		align-items: center;
		position: absolute;
		right: 192rpx;

		.introduction-icon {
			display: block;
			width: 140rpx;
			height: 52rpx;
		}
	}



	.activity {
		min-height: 100%;
		// width: 100%;
		// display: flex;
		// flex-direction: column;
		// align-items: center;
		// overflow-x: hidden;
	}

	.activity-header {
		width: 100%;
		height: 790rpx;
		// border: 1rpx solid rgba(0,0,0,0);
		// background:url(/static/images/activity-header-bg.png) no-repeat center;
		// background-size: cover;
		display: flex;
		flex-direction: column;
		// padding-top:216rpx;
		position: relative;

		.activity-header-bg {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 0;
		}

	}

	.header-section-one {
		width: 686rpx;
		height: 272rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		position: relative;
		margin: 216rpx auto 0;
	}

	.header-section-ong-bg {
		width: 686rpx;
		height: 100rpx;
		background: linear-gradient(180deg, rgba(254, 199, 160, 0.33) 0%, rgba(254, 199, 160, 0) 100%);
		box-shadow: inset 0px 0px 0px 0px rgba(255, 255, 255, 1);
		border-radius: 16rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
	}

	.activity-join-user {
		padding-top: 42rpx;
		display: flex;
		// height: 80rpx;
		align-items: center;
		justify-content: space-between;
		position: relative;
		z-index: 1;

		.activity-join-user-left {
			display: flex;
			align-items: center;

			>view {
				font-size: 32rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #333333;
				line-height: 44rpx;
			}

			>image {
				display: block;
				width: 40rpx;
				height: 40rpx;
				margin: 0 8rpx 0 48rpx;
			}

			.user-grade-icon {
				display: block;
				width: 80rpx;
				height: 40rpx;
				margin: 0 8rpx 0 48rpx;
			}

			.grade-progress {
				font-size: 28rpx;
				font-weight: 300;
				margin-left: 10rpx;
			}

			.tip-icon-box {
				display: block;
				width: 34rpx;
				height: 34rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-left: 15rpx;

				// position: absolute;
				// top:26rpx;
				// right:40rpx;
				>image {
					display: block;
					width: 34rpx;
					height: 34rpx;

				}
			}
		}

		.activity-join-user-right {
			display: flex;
			align-items: center;
			position: relative;

			.hasOrderTips {
				width: 30rpx;
				height: 30rpx;
				background: #EF4034;
				border-radius: 50%;
				position: absolute;
				right: 38rpx;
				right: 50rpx;
				top: -15rpx;

				right: 38rpx;
				right: 45rpx;
				top: -22rpx;

				font-size: 18rpx;
				color: #ffffff;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			>view {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
				line-height: 40rpx;
			}

			>image {
				display: block;
				width: 32rpx;
				height: 32rpx;
				margin-right: 32rpx;
			}
		}
	}

	.activity-account-box {
		display: flex;
		margin-top: 40rpx;

		>view:nth-child(1) {
			margin: 0 108rpx 0 48rpx;
		}
	}

	.activity-account-item {
		display: flex;
		flex-direction: column;

		>view:nth-child(1) {
			display: flex;
			margin: 0 0 16rpx 0;

			>image {
				display: block;
				width: 32rpx;
				height: 32rpx;
				margin-right: 8rpx;
			}

			>view {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				line-height: 34rpx;
			}
		}

		>view:nth-child(2) {
			display: flex;
			align-items: baseline;

			>image {
				display: block;
				width: 24rpx;
				height: 24rpx;
				margin-left: 6rpx;
			}

			>view {
				font-size: 48rpx;
				font-family: DINAlternate-Bold, DINAlternate;
				font-weight: bold;
				color: #333333;
				line-height: 56rpx;
			}
		}
	}

	.activity-join-box {
		display: flex;
		justify-content: center;
		width: 686rpx;
		height: 274rpx;
		background: #ffffff;
		margin: 24rpx auto 0;
		border-radius: 16rpx;
		position: relative;
		z-index: 2;
	}

	.activity-join-item {
		width: 50%;
		height: 100%;
	}

	.activity-join-item-line {
		width: 2rpx;
		height: 210rpx;
		background: #F5F5F5;
		margin-top: 32rpx;
	}

	.activity-join-title {
		padding: 32rpx 0 0rpx 0;
		margin-left: 32rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #333333;
		line-height: 44rpx;

		>text:nth-child(2) {
			font-size: 28rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #FE3F34;
			line-height: 40rpx;
			margin-left: 16rpx;
		}
	}

	.count-down-time {
		margin: 32rpx 0 0 32rpx;
	}

	::v-deep .count-down-time .uni-countdown__splitor {
		font-size: 34rpx !important;
	}

	 ::v-deep .count-down-time .uni-countdown__number {
		width: 62rpx !important;
		height: 52rpx !important;
		font-size: 34rpx !important;
		display: flex;
		align-items: center;
		justify-content: center;
		line-height: 60rpx !important;
	}

	.count-down-time1 {
		margin: 17rpx 0 0 32rpx;
		display: flex;
		align-items: center;
	}

	 ::v-deep .count-down-time1 .uni-countdown__splitor {
		font-size: 60rpx !important;
		margin: 0 8rpx !important;
	}

	::v-deep .count-down-time1 .uni-countdown__number {
		width: 66rpx !important;
		height: 70rpx !important;
		font-size: 60rpx !important;
		font-weight: 600;
		display: flex;
		align-items: center;
		justify-content: center;
		line-height: 80rpx !important;
	}

	.start-time {
		font-size: 26rpx;
		margin: 15rpx 0 0 30rpx;
	}

	.join-activity-btn-waiting {
		font-size: 28rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #FE3F34;
		line-height: 40rpx;
		margin: 32rpx 0 0 32rpx;

		>text:nth-child(1) {
			font-size: 28rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #333333;
			margin-right: 8rpx;
		}
	}

	.join-activity-btn {
		width: 160rpx;
		height: 60rpx;
		background: #EF4034;
		border-radius: 38rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #ffffff;
		font-size: 28rpx;
		margin: 0 32rpx 0 32rpx;
	}

	.activity-content {
		width: 100%;
		border-radius: 30rpx 30rpx 0 0;
		background: #f6f6f6;
		margin: 30rpx 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: 150rpx;
	}

	.activity-goods-list-header-title {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 686rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #333333;
		line-height: 44rpx;
		margin-bottom: 32rpx;

		>image {
			display: block;
			width: 526rpx;
			height: 60rpx;
		}
	}

	.activity-goods-item {
		width: 686rpx;
		height: 232rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 0rpx auto 16rpx;
		display: flex;
	}

	.activity-goods-icon {
		width: 232rpx;
		height: 232rpx;
		border-radius: 16rpx 0 0 16rpx;
		margin: 0rpx 24rpx 0 0rpx;

		>image {
			display: block;
			width: 100%;
			height: 100%;
			border-radius: 16rpx 0 0 16rpx;
		}
	}

	.activity-goods-title {
		width: 406rpx;
		height: 80rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #000000;
		line-height: 40rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		margin-top: 16rpx;
	}

	.activity-goods-price {
		display: flex;
		margin-top: 20rpx;

		>image {
			display: block;
			width: 70rpx;
			height: 20rpx;
			margin-top: 18rpx;
		}

		>text:nth-child(2) {
			font-size: 24rpx;
			color: #EF4034;
			line-height: 24rpx;
			margin-top: 17rpx;
		}

		>text:nth-child(3) {
			font-size: 40rpx;
			font-family: DINAlternate-Bold, DINAlternate;
			font-weight: bold;
			color: #EF4034;
			line-height: 48rpx;
		}
	}

	.gold-coins {
		width: fit-content;
		height: 28rpx;
		background: #FEECDF;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 30rpx 0 4rpx 0rpx;
	}

	.gold-coins-text-icon {
		display: block;
		width: 32rpx;
		height: 24rpx;
	}

	.gold-coins-text {
		width: 54rpx;
		font-size: 20rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FF4924;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-left: 5rpx;
	}

	.gold-coins-num {
		min-width: 64rpx;
		height: 100%;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;

		.redbg {
			display: block;
			width: 100%;
			height: 100%;
			position: absolute;
			right: 0;
			top: 0;
			z-index: 0;
		}

		.gold-coins-need {
			height: 100%;
			position: relative;
			z-index: 1;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #77493B;
			padding: 0 8rpx;
			display: flex;
			align-items: center;
			font-size: 22rpx;
			line-height: 22rpx;

			text {
				font-size: 24rpx;
			}
		}
	}

	.count-down {
		width: 150rpx;
		height: 80rpx;
		background: #EF4034;
	}


	/*新入口样式*/
	.activity-enter {
		width: 686rpx;
		height: 274rpx;
		background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 22%, #FFFFFF 80%, #FFFFFF 100%);
		background: #ffffff;
		border-radius: 18rpx;
		margin: 26rpx auto 0;
		position: relative;
		z-index: 2;

		.activity-enter-header-nav {
			width: 686rpx;
			height: 112rpx;
			background: linear-gradient(90deg, #FE373F 0%, #FF6426 100%);
			border-radius: 18rpx 18rpx 0rpx 0rpx;
			display: flex;
			justify-content: space-between;

			>view {
				position: relative;
			}

			.haswidth {
				width: 234rpx !important;
			}

			>.activity-enter-header-nav-item:nth-child(1) {
				border-radius: 18rpx 0 0 0;
				height: 100%;
				position: relative;

				>image {
					display: block;
					height: 100%;
				}

				.activity-enter-header-nav-item-title {
					width: 100%;
					height: 100%;
					position: absolute;
					left: 0;
					top: 0;
					display: flex;
					flex-direction: column;
					justify-content: center;

					.activity-enter-time {
						font-size: 40rpx;
						// font-family: DINAlternate-Bold, DINAlternate;
						font-weight: bold;
						color: #FFFFFF;
						line-height: 48rpx;
						margin: 10rpx 0 5rpx 60rpx;
					}

					.activity-enter-rounds-num {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 34rpx;
						opacity: 0.7;
						text-align: center;
					}

					.tabActive-time {
						color: #FE3A3E;
						opacity: 1;
					}

					.tabActive-rounds-num {
						color: #FE3A3E;
						opacity: 1;
						margin-left: 24rpx;
						text-align: left;
					}
				}
			}

			>.activity-enter-header-nav-item:nth-child(2) {
				flex: 1;
				height: 100%;

				>image {
					display: block;
					height: 100%;
				}

				.activity-enter-header-nav-item-title {
					width: 100%;
					height: 100%;
					position: absolute;
					left: 0;
					top: 0;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					.activity-enter-time {
						font-size: 40rpx;
						// font-family: DINAlternate-Bold, DINAlternate;
						font-weight: bold;
						color: #FFFFFF;
						line-height: 48rpx;
						text-align: center;
						margin: 10rpx 0 5rpx 0;
					}

					.activity-enter-rounds-num {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 34rpx;
						opacity: 0.7;
						text-align: center;
					}

					.tabActive-time {
						color: #FE3A3E;
						opacity: 1;
					}

					.tabActive-rounds-num {
						color: #FE3A3E;
						opacity: 1;
					}
				}
			}

			>.activity-enter-header-nav-item:nth-child(3) {
				height: 100%;

				>image {
					display: block;
					height: 100%;
				}

				.activity-enter-header-nav-item-title {
					width: 100%;
					height: 100%;
					position: absolute;
					left: 0;
					top: 0;
					display: flex;
					flex-direction: column;
					justify-content: center;

					.activity-enter-time {
						font-size: 40rpx;
						// font-family: DINAlternate-Bold, DINAlternate;
						font-weight: bold;
						color: #FFFFFF;
						line-height: 48rpx;
						text-align: center;
						margin: 10rpx 0 5rpx 0;
					}

					.activity-enter-time1 {
						font-size: 32rpx;
					}

					.activity-enter-rounds-num {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 34rpx;
						opacity: 0.7;
						text-align: center;
					}

					.tabActive-time {
						color: #FE3A3E;
						text-align: right;
						margin-right: 58rpx;
						opacity: 1;
					}

					.tabActive-rounds-num {
						color: #FE3A3E;
						text-align: right;
						margin-right: 24rpx;
						opacity: 1;
					}
				}
			}

		}
	}

	.activity-enter-count-down-time-part {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 162rpx;
	}

	.activity-enter-count-down-time-part-unable {
		justify-content: space-between;

		>view:nth-child(1) {
			display: flex;
			align-items: center;
		}
	}

	.activity-enter-time-to-end {
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 34rpx;
		margin: 0 20rpx 0 30rpx;
	}

	.activity-enter-count-down-time1 {
		margin: 0;
		display: flex;
		align-items: center;
	}

	::v-deep.activity-enter-count-down-time1 .uni-countdown__splitor {
		font-size: 60rpx !important;
		margin: 0 8rpx !important;
	}

	::v-deep.activity-enter-count-down-time1 .uni-countdown__number {
		width: 66rpx !important;
		height: 70rpx !important;
		font-size: 60rpx !important;
		font-weight: 600;
		display: flex;
		align-items: center;
		justify-content: center;
		line-height: 80rpx !important;
	}

	.activity-enter-count-down-time {
		margin: 0;
	}

	::v-deep .activity-enter-count-down-time .uni-countdown__splitor {
		font-size: 34rpx !important;
	}

	 ::v-deep .activity-enter-count-down-time .uni-countdown__number {
		width: 62rpx !important;
		height: 52rpx !important;
		font-size: 34rpx !important;
		display: flex;
		align-items: center;
		justify-content: center;
		line-height: 60rpx !important;
		border: 2rpx solid #FECCC1;
	}

	.activity-enter-before-icon {
		width: 140rpx;
		height: 80rpx;
		margin: 0 40rpx 0 0rpx;

		>image {
			display: block;
			width: 100%;
			height: 100%;
		}
	}

	.unstart {
		width: 160rpx;
		height: 60rpx;
		background: #C6C6C6;
		border-radius: 38rpx;
		font-size: 24rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 40rpx;
	}

	.tips-content-modal {
		width: 606rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 0 30rpx 50rpx 30rpx;

		.tips-content-title {
			text-align: center;
			padding: 40rpx 0 20rpx 0;
			font-size: 32rpx;
			color: #333333;
			font-weight: 500;
		}

		.tips-item {
			font-size: 28rpx;
			color: #666666;
			line-height: 60rpx;
			letter-spacing: 0rpx;
		}

		.confirm {
			width: 400rpx;
			height: 70rpx;
			background: #FF9500;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			font-weight: 600;
			color: #FFFFFF;
			border-radius: 10rpx;
			margin: 50rpx auto 0;
		}
	}

	.video-content-modal {
		width: 740rpx;

		>video {
			display: block;
			width: 100%;
			height: 450rpx;
		}
	}

	.return-top {
		width: 96rpx;
		height: 96rpx;
		position: fixed;
		bottom: 280rpx;
		right: 32rpx;
	}

	.close-down-box {
		width: 550rpx;
		height: 160rpx;
		margin: 0 auto;
		position: relative;

		>view {
			font-size: 24rpx;
			font-weight: 600;
			color: #ffffff;
			position: absolute;
			;
			left: 200rpx;
			top: 70rpx;
		}
	}

	.close-down {
		width: 550rpx;
		height: 160rpx;
		display: block;
		margin: 0 auto;
	}
</style>
